<template>
	<view class="redpack">
		<view class="white_bg">
			
		</view>
		<view class="moneys">
			<image class="right_img" :src="IMGLink+'/my/right_bg.png'" mode="widthFix"></image>
			<view class="balance">
				<view class="balance_left">
					<text>红包余额(元)</text>
					<view>￥ <text class="nums">{{redpacket.user_red_packet}}</text></view>
				</view>
				<button class="recharge-btn" type="default" size="mini" @click="toWithdraw">提现</button>
			</view>
			
			<view class="income">
				<view class="income_left">
					<text>昨日收益</text>
					<text class="innum">￥{{redpacket.yesterday_income}}</text>
				</view>
				<view class="income_left">
					<text>累计收益</text>
					<text class="innum">￥{{redpacket.total_income}}</text>
				</view>
			</view>
		</view>
		<view class="others">
			<uni-list>
				<uni-list-item title="提现规则" link to="/pagesA/my/rules/ruleDetail?type=3"></uni-list-item>
				<uni-list-item title="红包明细" showArrow to="/pagesA/my/redpacket/redlist"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {coins} from "@/api/my/my.js";
	
	export default{
		data(){
			return{
				IMGLink:this.IMGLink,
				redpacket:{
					user_red_packet:"0.00",
					yesterday_income:"0.00",
					total_income:"0.00"
				},
			}
		},
		created() {
		},
		onShow() {
			this.getRedPacket();
		},
		methods:{
			// 红包收益
			getRedPacket(){
				coins('userredpacket', {}).then(res => {
					this.redpacket =res.data;
				}).catch(error => {
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url,
				});
			},
			toWithdraw(){
				uni.navigateTo({
					url: '/pagesA/my/account/withdraw?type=2',
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@mixin cards {
		box-sizing: border-box;
		width: 94%;
		margin: 20rpx 3%;
		background: #FFFFFF;
		border-radius: 24rpx;
	}
	@mixin flexLayout($align, $justy) {
		display: flex;
		align-items: $align;
		justify-content: $justy;
	}
	.white_bg{
		height: 206rpx;
		background-color: #FFFFFF;
	}
	.moneys,.others{
		@include cards;
		position: relative;
		top: -206rpx;
	}
	.moneys{
		position: relative;
		background: #F54642;
		color: #FFFFFF;
		.right_img{
			width: 360rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		.balance{
			@include flexLayout(center,space-between);
			padding: 30rpx 40rpx;
			
			.recharge-btn{
				width: 200rpx;
				height: 76rpx;
				margin: 0;
				color: #F54642;
				font-size: 32rpx;
				background: #FFFFFF;
				border-radius: 42px;
			}
			&_left{
				@include flexLayout(flex-start,space-between);
				flex-direction: column;
				font-size: 24rpx;
				view{
					margin-top: 30rpx;
				}
				.nums{
					font-size: 40rpx;
				}
			}
			
		}
	}
	.income{
		@include flexLayout(center,space-between);
		color: #FFFFFF;
		background: rgba(255, 255, 255, 0.1);
		opacity: 0.9;
		padding: 26rpx 0;
		font-size: 24rpx;
		border-radius: 0px 0px 24rpx 24rpx;
		margin-top: 30rpx;
		&_left{
			width: 50%;
			@include flexLayout(center,center);
			flex-direction: column;
			.innum{
				font-size: 32rpx;
				margin-top: 20rpx;
			}
		}
		&_left:first-child{
			border-right: 1px solid #FFFFFF;
		}
		
	}
	.others{
		padding: 0 20rpx;
		/deep/ .uni-list--border-top,
		/deep/ .uni-list--border-bottom {
			background-color: transparent;
		}
		/deep/ .uni-list-item__container {
			padding-left: 10rpx;
		}
		
		/deep/ .uni-icon-wrapper {
			padding: 0;
		}
		
		/deep/ .uni-list-item__content-title {
			color: #181818;
		}
	}
</style>
